<script setup>
import { addRecommendMonthPar } from "@/api/lawyer";
import { onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, watch } from "vue";

import { rankingOptions, companyPositionOptions, businessOptions } from "@/utils/dict";

const stepsCurrent = ref(0);
const pickerRef = ref(null);
const pickerColumns = ref([]);
const pickerTitle = ref('');
const pickerField = ref('');
function handlePickerOpen(title, field, options) {
  pickerTitle.value = title;
  pickerField.value = field;
  pickerColumns.value = [options];
  pickerRef.value.open();
}
function handlePickerConfirm({value}){
  formData[pickerField.value] = value[0];
}

/** 业务领域 */
const currentField = ref('');
const activeBusiness = ref([]);
const popupBusinessRef = ref(null);
function handlePopupBusinessOpen(field) {
  currentField.value = field;
  if(formData[field]) {
    activeBusiness.value = formData[field].split('、');
  }else {
    activeBusiness.value = []
  }
  popupBusinessRef.value.open()
}
function handlePopupBusinessClose() {
  popupBusinessRef.value.close();
}
function handlePopupBusinessConfirm() {
  formData[currentField.value] = activeBusiness.value.join('、') || '';
  activeBusiness.value = [];
  popupBusinessRef.value.close();
}
function handleClickBusinessItem(item) {
  if(activeBusiness.value.includes(item)){
    activeBusiness.value.splice(activeBusiness.value.indexOf(item), 1);
  } else {
    activeBusiness.value.push(item);
  }
}
const popupBusinessMoreRef = ref(null);
function handlePopupBusinessMoreOpen() {
  popupBusinessRef.value.close();
  popupBusinessMoreRef.value.open();
}
function handlePopupBusinessMoreClose() {
  popupBusinessMoreRef.value.close();
}
function handlePopupBusinessMoreConfirm() {
  uni.showToast({title: '提交成功', icon: 'none'});
  popupBusinessMoreRef.value.close();
}

/** 主要合作客户 */
const keyClients = ref([{key: 1, name: '', industry: ''}]);
function handleAddKeyClient(){
  keyClients.value.push({key: Date.now(), name: '', industry: ''})
}

/** 典型案例 */
const typicalCase = ref([{key: 1, secrecy: 0, name: '', desc: '', participant: '', email: ''}]);
function handleAddTypicalCase(){
  typicalCase.value.push({key: Date.now(), secrecy: 0, name: '', desc: '', participant: '', email: ''})
}
function handleDelTypicalCase(key){
  // 取消成功，手动删除列表项
  const idx = typicalCase.value.findIndex(item=>item.key== key);
  typicalCase.value.splice(idx,1);
  uni.showToast({ title: '删除成功', icon:'none' });
}

const initFormData = uni.getStorageSync("monthFormData") ? JSON.parse(uni.getStorageSync("monthFormData")) : {
  recommendNameFr: "", // 推荐人姓名
  recommendCompanyFr: "", // 推荐人律所
  recommendJoblevelFr: "", // 职务级别
  recommendPhoneFr: "", // 电话
  recommendMail: "", // 邮箱
  recommendLawyerName: "", // 律师姓名
  recommendLawyerCompany: "", // 所在律所
  recommendLawyoerJoblevel: "", // 职务级别
  recommendLawyoerPeriod: "", // 从业年限
  recommendLawyoerCity: "", // 工作城市
  recommendLawyerPhone: "", // 电话
  recommendLawyerMail: "", // 邮箱
  recommendLawyerField: "", // 执业领域
  recommendLawyerAward: "", // 申报奖项
  recommendLawyerGroup: "", // 该榜单内下设分组
  recommendReason: "", // 自荐理由
  teamSize: undefined, // 团队总人数
  licenseLawyers: undefined, // 执牌律师人数
  partnerNum: undefined, // 合伙人人数
  managerFlag: 1, // 是否为团队负责人 0 否 1 是
  companyRevenue: undefined, // 过去三年平均团队总营收
  revenuePerCapita: undefined, // 人均营收（万/年）
  keyClients: "", // 主要合作客户
  typicalCase: "", // 典型案例
}
/** 表单数据 */
const formData = reactive(initFormData);
watch(formData, (newVal) => {
  uni.setStorage({ key: "monthFormData", data: JSON.stringify(newVal) });
});
/** 校验规则 */
const formRules = {
  recommendNameFr: {
    rules: [{ required: true, errorMessage: "请填写填表人姓名" }],
  },
  recommendCompanyFr: {
    rules: [{ required: true, errorMessage: "请填写事务所名称" }],
  },
  recommendJoblevelFr: {
    rules: [{ required: true, errorMessage: "请填写职务" }],
  },
  recommendPhoneFr: {
    rules: [{ required: true, errorMessage: "请填写电话" }, { format: 'number', errorMessage: '手机号格式错误' }],
  },
  recommendMail: {
    rules: [{ required: true, errorMessage: "请填写邮箱" }, { format: 'email', errorMessage: '邮箱错误' }],
  },
  recommendLawyerName: {
    rules: [{ required: true, errorMessage: "请填写律师姓名" }],
  },
  recommendLawyerCompany: {
    rules: [{ required: true, errorMessage: "请填写律所名称" }],
  },
  recommendLawyoerJoblevel: {
    rules: [{ required: true, errorMessage: "请填写职务" }],
  },
  recommendLawyoerPeriod: {
    rules: [{ required: true, errorMessage: "请填写从业年限" }],
  },
  recommendLawyoerCity: {
    rules: [{ required: true, errorMessage: "请填写工作城市" }],
  },
  recommendLawyerPhone: {
    rules: [{ required: true, errorMessage: "请填写电话" }, { format: 'number', errorMessage: '手机号格式错误' }],
  },
  recommendLawyerMail: {
    rules: [{ required: true, errorMessage: "请填写邮箱" }, { format: 'email', errorMessage: '邮箱错误' }],
  },
  recommendLawyerGroup: {
    rules: [{ required: true, errorMessage: "请选择该榜单内下设分组" }],
  },
  recommendReason: {
    rules: [{ required: true, errorMessage: "请填写自荐理由" }],
  },
  teamSize: {
    rules: [{ required: true, errorMessage: "请填写团队总人数" }],
  },
  licenseLawyers: {
    rules: [{ required: true, errorMessage: "请填写执牌律师人数" }],
  },
  partnerNum: {
    rules: [{ required: true, errorMessage: "请填写合伙人人数" }],
  },
  companyRevenue: {
    rules: [{ required: true, errorMessage: "请填写过去三年平均的团队总营收" }],
  },
};

const recommendLawyerGroup = ref([]);
const rankingGroupActive = ref([]);
const rankingGroupRenderText = ref('');
watch(() => formData.recommendLawyerAward, (newVal) => {
  rankingGroupActive.value = [];
  rankingGroupRenderText.value = '';
}, { immediate: true });
const popupRef = ref(null);
function handlePopupOpen() {
  popupRef.value.open()
}
function handlePopupClose() {
  popupRef.value.close();
}
function handlePopupConfirm() {
  popupRef.value.close();
  rankingGroupRenderText.value = rankingGroupActive.value.join('、') || '';
  formData.recommendLawyerGroup = recommendLawyerGroup.value.join('、') || '';
}
function handleClickRankingGroupItem(item, label) {
  if(rankingGroupActive.value.includes(item)){
    recommendLawyerGroup.value.splice(recommendLawyerGroup.value.indexOf(`${label}-${item}`), 1);
    rankingGroupActive.value.splice(rankingGroupActive.value.indexOf(item), 1);
  } else {
    rankingGroupActive.value.push(item);
    recommendLawyerGroup.value.push(`${label}-${item}`);
  }
} 
/** uni-forms 组件实例 */
const formRef = ref(null);
const loading = ref(false);

// 上一步 or 返回
function handlePreviousStep() {
  if(stepsCurrent.value == 0) {
    uni.navigateBack()
  } else {
    stepsCurrent.value--
  }
}

// 下一步 or 提交
async function handleNextStep() {
  if(stepsCurrent.value == 2) {
    if (loading.value) return;
    // 调用登陆接口
    loading.value = true;
    formData.keyClients = JSON.stringify(keyClients.value);
    formData.typicalCase = JSON.stringify(typicalCase.value);
    addRecommendMonthPar(formData).then(res=>{
      uni.showToast({title: '提交成功，等待审核...', icon: 'none'});
      uni.removeStorageSync("monthFormData");
      uni.redirectTo({ url: '/pages/user/recommend'});
    }).finally(() => {
      loading.value = false;
    });
  } else if( stepsCurrent.value == 0 ) {
    // 表单校验
    const res = await formRef.value.validateField(['recommendNameFr', 'recommendCompanyFr', 'recommendJoblevelFr', 'recommendPhoneFr', 'recommendMail']);
    // 如果校验未通过，validateField 会返回错误对象（数组），否则为校验对象
    if (Array.isArray(res)) return;
    stepsCurrent.value++
  } else {
    // 表单校验
    const res = await formRef.value.validateField(['recommendLawyerName', 'recommendLawyerCompany', 'recommendLawyoerJoblevel', 'recommendLawyoerPeriod', 'recommendLawyoerCity', 'recommendLawyerPhone', 'recommendLawyerMail', 'recommendLawyerField', 'recommendLawyerGroup', 'recommendReason', 'teamSize', 'licenseLawyers', 'partnerNum', 'companyRevenue']);
    // 如果校验未通过，validateField 会返回错误对象（数组），否则为校验对象
    if (Array.isArray(res)) return;
    stepsCurrent.value++
  }
}

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
  <view class="relative overflow-hidden">
    <page-navbar title="奖项申报" :isScrolled="isScrolled"></page-navbar>
    <view class="mx-4 mt-5">
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/steps_1.png" mode="widthFix" />
    </view>
    <view class="mx-4 mt-3 py-3 rounded bg-white">
      <uv-steps :current="stepsCurrent" activeColor="#1373FF" inactiveColor="#999999">
        <uv-steps-item >
          <template v-slot:title>
            <view class="text-sm text-#1373FF">填表人信息</view>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <view class="text-sm" :class="stepsCurrent > 0 ? 'text-#1373FF': 'text-#999999'">参评基本信息</view>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <view class="text-sm" :class="stepsCurrent > 1 ? 'text-#1373FF': 'text-#999999'">典型案例</view>
          </template>
        </uv-steps-item>
      </uv-steps>
    </view>

    
    
    <uni-forms ref="formRef" label-width="0" :model="formData" :rules="formRules">
      <view class="mx-4 mt-3 bg-white p-3 rounded-lg grid gap-3" v-show="stepsCurrent == 0">
        <uni-forms-item name="recommendNameFr">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">填表人姓名</view>
            <input class="text-(sm right)" v-model="formData.recommendNameFr" placeholder="填写填表人姓名" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendCompanyFr">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">所在事务所</view>
            <input class="text-(sm right)" v-model="formData.recommendCompanyFr" placeholder="填写事务所名称" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendJoblevelFr">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">职务级别</view>
            <input class="text-(sm right)" v-model="formData.recommendJoblevelFr" placeholder="填写职务" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendPhoneFr">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">电话</view>
            <input class="text-(sm right)" v-model="formData.recommendPhoneFr" placeholder="填写电话" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendMail">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">邮箱</view>
            <input class="text-(sm right)" v-model="formData.recommendMail" placeholder="填写邮箱" />
          </view>
        </uni-forms-item>
      </view>

      <view class="mx-4 mt-3 bg-white p-3 rounded-lg grid gap-3" v-show="stepsCurrent == 1">
        <uni-forms-item name="recommendLawyerName">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">律师姓名</view>
            <input class="text-(sm right)" v-model="formData.recommendLawyerName" placeholder="填写律师姓名" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendLawyerCompany">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">所在律所</view>
            <input class="text-(sm right)" v-model="formData.recommendLawyerCompany" placeholder="填写律所名称" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendLawyoerJoblevel">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">职务级别</view>
            <input class="text-(sm right)" v-model="formData.recommendLawyoerJoblevel" placeholder="填写职务" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendLawyoerPeriod">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">从业年限</view>
            <input class="text-(sm right)" v-model="formData.recommendLawyoerPeriod" placeholder="填写从业年限" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendLawyoerCity">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">工作城市</view>
            <input class="text-(sm right)" v-model="formData.recommendLawyoerCity" placeholder="填写工作城市" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendLawyerPhone">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">电话</view>
            <input class="text-(sm right)" v-model="formData.recommendLawyerPhone" placeholder="填写电话" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendLawyerMail">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">邮箱</view>
            <input class="text-(sm right)" v-model="formData.recommendLawyerMail" placeholder="填写邮箱" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendLawyerField">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) flex-1 font-semibold">执业领域</view>
            <view class="text-(sm right) max-w-1/2 line-clamp-1"
              :class="{'text-#808080': formData.recommendLawyerField == ''}"
              @click="handlePopupBusinessOpen('recommendLawyerField')"
            >
            {{formData.recommendLawyerField || '选择执业领域' }}
            </view>
            <view class="i-ri-arrow-right-s-line text-#808080"></view>
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendLawyerGroup">
          <view class="py-3 flex items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) flex-1 font-semibold before:content-['*'] before:text-red-500 before:mr-1">申报奖项</view>
            <view class="text-(sm right) max-w-1/2 line-clamp-1"
              :class="{'text-#808080': rankingGroupRenderText == ''}"
              @click="handlePopupOpen()"
            >
            {{rankingGroupRenderText || '选择申报奖项' }}
            </view>
            <view class="i-ri-arrow-right-s-line text-#808080"></view>
          </view>
        </uni-forms-item>
        <uni-forms-item name="recommendReason">
          <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">自荐理由</view>
            <textarea class="text-sm w-full h-30" :maxlength="-1" v-model="formData.recommendReason" placeholder="填写自荐理由" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="teamSize">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">团队总人数</view>
            <input class="text-(sm right)" type="number" v-model="formData.teamSize" placeholder="填写团队总人数" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="licenseLawyers">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">执牌律师人数</view>
            <input class="text-(sm right)" type="number" v-model="formData.licenseLawyers" placeholder="填写执牌律师人数" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="partnerNum">
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">合伙人人数</view>
            <input class="text-(sm right)" type="number" v-model="formData.partnerNum" placeholder="填写合伙人人数" />
          </view>
        </uni-forms-item>
        <uni-forms-item name="managerFlag">
          <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">是否为团队负责人</view>
            <view class="grid grid-cols-2 gap-3 text-center">
              <view 
                class="rounded p-2 text-sm/6"
                :class="[formData.managerFlag == 1 ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                @click="formData.managerFlag = 1"
              >是</view>
              <view 
                class="rounded p-2 text-sm/6"
                :class="[formData.managerFlag == 0 ? 'bg-#1373FF/10 text-#1373FF border-(~ solid #1373FF)' : 'bg-#F6F8FA']"
                @click="formData.managerFlag = 0"
              >否</view>
            </view>
          </view>
        </uni-forms-item>
        <uni-forms-item name="companyRevenue">
          <view class="pt-3 flex justify-between items-center">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">过去三年平均的团队总营收</view>
            <view class="text-(sm right #999999) flex-1">例：800万/年</view>
          </view>
          <view class="py-3 flex items-center justify-between gap-2 border-b-(~ solid #F4F6F7)">
            <input class="text-sm flex-1" type="number" v-model="formData.companyRevenue" placeholder="请输入" />
            <view class="text-sm font-semibold">万/年</view>
          </view>
        </uni-forms-item>

        <uni-forms-item name="revenuePerCapita">
          <view class="pt-3 flex justify-between items-center">
            <view class="text-(sm #333333) font-semibold before:content-['*'] before:text-red-500 before:mr-1">人均营收（万/年）</view>
            <view class="text-(sm right #999999) flex-1">例：800万/年</view>
          </view>
          <view class="py-3 flex items-center justify-between gap-2 border-b-(~ solid #F4F6F7)">
            <input class="text-sm flex-1" type="number" v-model="formData.revenuePerCapita" placeholder="请输入" />
            <view class="text-sm font-semibold">万/年</view>
          </view>
        </uni-forms-item>


        <uni-forms-item name="keyClients">
          <template v-for="(item, index) in keyClients" :key="item.key">
            <view class="text-(sm #333333) font-semibold">主要合作客户{{ index+1 }}</view>
            <view class="py-3 border-b-(~ solid #F4F6F7)">
              <input class="text-sm" v-model="item.name" placeholder="客户名称" />
            </view>
            <view class="py-3 border-b-(~ solid #F4F6F7) mb-3">
              <input class="text-sm" v-model="item.industry" placeholder="所属行业" />
            </view>
          </template>
        </uni-forms-item>

        <view class="text-(sm #1373FF center)" @click="handleAddKeyClient">+ 增加主要合作客户</view>
      </view>

      <uni-forms-item name="typicalCase" v-if="stepsCurrent == 2">
        <template v-for="(item, index) in typicalCase" :key="item.key">
        <view class="mx-4 mt-3 flex items-center justify-between text-(sm #333333)">
          <view class="font-semibold">项目/案例{{ index+1 }}</view>
          <view class="flex space-x-1 items-center" v-show="item.secrecy == 0" @click="item.secrecy = 1">
            <view class="i-gg-radio-check"></view>
            <view>保密项目</view>
          </view>
          <view class="flex space-x-1 items-center text-#1373FF" v-show="item.secrecy == 1" @click="item.secrecy = 0">
            <view class="i-gg-radio-checked"></view>
            <view>保密项目</view>
          </view>
        </view>
        <view class="mx-4 mt-1 text-(xs #999999)">近三年律师典型案例介绍</view>

        <view class="mx-4 mt-3 bg-white p-3 rounded-lg grid gap-3">
          <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold">项目/案例名称</view>
            <input class="text-sm" v-model="item.name" placeholder="项目/案例名称" />
          </view>
          <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold">项目/案例简介</view>
            <textarea class="text-sm w-full h-30" v-model="item.desc" placeholder="包括客户名称，项目金额，项目时间、提名律师如何参与项目，以及项目相关情况（如影响力、代表性、创新性等）" />
          </view>
          <view class="py-3 grid gap-2 border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold">其他参与者</view>
            <textarea class="text-sm w-full h-30" v-model="item.participant" placeholder="请详细列举律所和牵头人，附其电话及邮箱等联系方式" />
          </view>
          <view class="py-3 flex justify-between items-center border-b-(~ solid #F4F6F7)">
            <view class="text-(sm #333333) font-semibold">企业法务/客户联系人</view>
            <input class="text-(sm right)" v-model="item.email" placeholder="电邮地址" />
          </view>
          <view class="text-(sm #EA0000 center)" @click="handleDelTypicalCase(item.key)">删除该项目</view>
        </view>
        </template>

        <view class="mt-3 p-3 text-(sm #1373FF center)" @click="handleAddTypicalCase">+ 增加项目/案例</view>
      </uni-forms-item>
    </uni-forms>


    <view class="w-86 fixed bottom-0 mb-[--safe-area-inset-bottom] pb-5 left-50% -translate-x-50% z-10 bg-#F6F8FA">
      <view class="px-1 border-(~ solid #31946F) bg-#31946F/8 flex items-center rounded-lg space-x-2">
        <image class="w-7 -translate-y-2" src="https://static.minglvtang.com/images/icons/shield.png" mode="widthFix" />
        <view class="text-(sm #31946F)">我们竭诚保护您的数据安全，请放心填写</view>
      </view>
      <view class="mt-3 flex space-x-3">
        <view class="w-1/3">
          <uv-button
            size="large"
            text="上一步"
            :custom-style="{
              fontSize: '18px',
              height: '48px',
              borderRadius: '8px',
              borderColor: 'transparent'
            }"
            @click="handlePreviousStep"
          ></uv-button>
        </view>
        <view class="flex-1">
          <uv-button
            type="primary"
            size="large"
            :text="stepsCurrent == 2 ? '提交推荐' : '继续填写'"
            :custom-style="{
              fontSize: '18px',
              backgroundImage: 'linear-gradient(to right, #5199F9, #0164E6)',
              height: '48px',
              borderRadius: '8px',
              borderColor: 'transparent'
            }"
            @click="handleNextStep"
          ></uv-button>
        </view>
      </view>
    </view>
    <view class="h-40"></view>

    <uv-picker ref="pickerRef" :title="pickerTitle" :columns="pickerColumns" @confirm="handlePickerConfirm" round="12" confirmColor="#1373FF"></uv-picker>
    <uni-popup ref="popupRef" type="bottom">
      <view class="p-4 bg-white rounded-t-lg">
        <view class="flex items-center justify-between">
          <view class="text-(sm #909193)" @click="handlePopupClose">取消</view>
          <view class="text-sm">申报奖项</view>
          <view class="text-(sm #1373FF)" @click="handlePopupConfirm">确定</view>
        </view>
        <view class="mt-5 gap-3 overflow-y-auto max-h-[60vh]">
          <uni-collapse :border="false" accordion>
            <uni-collapse-item :title="ranking.label"
             :border="false" title-border="none" :name="ranking.label" 
             v-for="ranking in rankingOptions" :key="ranking.label"
            >
              <view class="flex flex-wrap gap-2 px-3 pb-3">
                <view 
                  v-for="item in ranking.children" :key="item"
                  class="rounded-lg px-3 py-2 text-sm/6 relative"
                  :class="[rankingGroupActive.includes(item) ? 'text-white bg-#1373FF border-(~ solid #1373FF)' : 'bg-white border-(~ solid black/8)']"
                  @click="handleClickRankingGroupItem(item, ranking.label)"
                >{{item}}</view>
              </view>
            </uni-collapse-item>
          </uni-collapse>
        </view>
      </view>
    </uni-popup>

    <!-- 业务领域 -->
    <uni-popup ref="popupBusinessRef" type="bottom">
      <view class="p-4 bg-white rounded-t-lg">
        <view class="flex items-center justify-between">
          <view class="text-(sm #909193)" @click="handlePopupBusinessClose">取消</view>
          <view class="text-sm">选择领域</view>
          <view class="text-(sm #1373FF)" @click="handlePopupBusinessConfirm">确定</view>
        </view>
        <view class="mt-5 gap-3 ">
          <uni-collapse :border="false" accordion value="合规与监管">
            <uni-collapse-item :title="business.label"
             :border="false" title-border="none" :name="business.label" 
             :thumb="business.icon"
             v-for="business in businessOptions" :key="business.label"
            >
              <view class="flex flex-wrap gap-2 px-3 pb-3">
                <view 
                  v-for="item in business.children" :key="item"
                  class="rounded px-3 py-2 text-sm/6 relative"
                  :class="[activeBusiness.includes(item) ? 'text-white bg-#1373FF border-(~ solid #1373FF)' : 'bg-white border-(~ solid black/8)']"
                  @click="handleClickBusinessItem(item)"
                >{{item}}</view>
              </view>
            </uni-collapse-item>
          </uni-collapse>
          <view class="text-(sm #207AFC center) mt-3" @click="handlePopupBusinessMoreOpen()">没有你的领域？备注说明</view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="popupBusinessMoreRef" type="bottom">
      <view class="p-4 bg-white rounded-t-lg">
        <view class="flex items-center justify-between">
          <view class="text-(sm #909193)" @click="handlePopupBusinessMoreClose">取消</view>
          <view class="text-sm">备注领域</view>
          <view class="text-(sm #1373FF)" @click="handlePopupBusinessMoreConfirm">确定</view>
        </view>
        <view class="mt-5 bg-#F6F7F9 rounded-lg p-2">
          <textarea class="text-sm w-full h-30" v-model="formData[currentField]" placeholder="输入你的领域" />
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped>
:deep(.uni-forms-item) {
  margin-bottom: 0;
}
:deep(.uni-collapse) {
  gap: 0.75rem;
}
:deep(.uni-collapse-item) {
  border-radius: 12px;
  overflow: hidden;
  background-color: #F6F7F9;
}
:deep(.uni-collapse-item__wrap) {
  background-color: #F6F7F9;
}
:deep(.uni-collapse-item__title-box) {
  background-color: #F6F7F9;
  font-weight: 500;
  line-height: 1.5;
  height: auto;
  padding: 12px;
}
:deep(.uni-collapse-item__title-text) {
  font-size: 14px;
  white-space: normal;
}
</style>
